iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 28

[試著把切版專案升級到 gulp4.0 吧] Day28 在生產環境時才壓縮檔案

  • 分享至 

  • xImage
  •  

就目前為止,開發前端需要的檔案轉換大致完成了:ejs->html、scss->css、ES6+->ES5、也順便壓縮了 CSS、JS、圖片檔的體積以優化存取速度。不過,其實只有在要佈署到主機這個生產環境時才需要壓縮檔案,在一般開發時其實是不需要壓縮的,反而會增加編譯的時間。因此,我們需要做個優化:如果現在在生產環境才多花時間去壓縮檔案,否則不用壓縮。

範例展示

一、安裝套件

npm install --save-dev minimist
npm install --save-dev gulp-if

二、在既有 task 流程中加入判斷:若在生產環境,就壓縮檔案以縮小體積

import gulp from "gulp"
import autoprefixer from "autoprefixer"
import minimist from "minimist"

const $ = require("gulp-load-plugins")()

/*****************************************************
 * 變數 block
 *****************************************************/
var envOptions = {
  string: "env",
  default: { env: "develop" }
}
var options = minimist(process.argv.slice(2), envOptions) // process.argv = [node, gulp.js, arg1, arg2, ...]
var envIsPro = options.env === "production" || options.env == "pro"

export function envNow(cb) {
  console.log(`env now is: ${options.env}, so envIsPro is ${envIsPro}`)
  console.log(options)
  cb()
}

/*****************************************************
 * HTML 處理 block
 *****************************************************/
export function ejs() {
  return gulp
    .src(["./source/**/*.ejs", "./source/**/*.html"])
    .pipe($.plumber())
    .pipe($.frontMatter())
    .pipe(
      $.layout(file => {
        return file.frontMatter
      })
    )
    .pipe(gulp.dest("./public"))
}

/*****************************************************
 * CSS 處理 block
 *****************************************************/
export function sass() {

  const processors = [autoprefixer()]

  return gulp
    .src(["./source/stylesheets/**/*.sass", "./source/stylesheets/**/*.scss"])
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe(
      $.sass({
        outputStyle: "nested",
        includePaths: ["./node_modules/bootstrap/scss"]
      }).on("error", $.sass.logError)
    )
    .pipe($.postcss(processors))
    .pipe($.if(envIsPro, $.cleanCss())) // 如果在生產環境,就壓縮 CSS
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/stylesheets"))
}

/*****************************************************
 *  JS 處理 block
 *****************************************************/

export function babel() {
  return gulp
    .src("./source/javascripts/**/*.js")
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe(
      $.babel({
        presets: ["@babel/env"]
      })
    )
    .pipe($.concat("all.js"))
    .pipe(
      $.if(
        envIsPro, // 如果在生產環境,就壓縮 JS
        $.uglify({
          compress: {
            drop_console: true
          }
        })
      )
    )
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/javascripts"))
}

/*****************************************************
 *  圖片處理 block
 *****************************************************/
export function imageMin() {
  return gulp
    .src("./source/images/*")
    .pipe($.if(envIsPro, $.imagemin()))  // 如果在生產環境,就壓縮圖片
    .pipe(gulp.dest("./public/images"))
  
}

三、執行

gulp sass --env production # 傳入 env 變數,值是 production,表示要編譯出生產環境需要的、壓縮過的檔案

小結

今天是「在生產環境時才壓縮檔案」的第一篇,簡單展示了判斷目前是生產環境才壓縮檔案的 gulpfile 設定。明天將會介紹在本文引入的 minimist、gulp-if 套件。


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day27 圖片壓縮處理:談 gulp-imagemin
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day29 在生產環境時才壓縮檔案:談 minimist、gulp-if
系列文
試著把切版專案升級到 gulp4.0 吧36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Ray
iT邦研究生 4 級 ‧ 2019-10-14 12:53:50

oh,這註解模式好久不見了XD

我還在摸索怎樣的註解方式比較好看 XD
這方式之前好像是在 JSDOC 的教學那看到的

我要留言

立即登入留言